<!-- 我的 - 个人中心页 -->
<template>
  <div class="my">
    <div class="myBgColor">
      <div class="news">
        <img src="../../assets/jy.png" alt="" width='20' style="margin-right: 15px;" @click="$router.push({path:'/main/transaction'})">
        <img src="../../assets/news.png" alt="" style="width:20px;" @click="$router.push({path:'/main/notice'})">
      </div>
      <div class="headPortrait" @click="$router.push({path:'/login'})">
        <img src="../../assets/myHead.png" alt="" width="40" height="40">
        <span class="phoneNum">{{user.username||0}}</span>
      </div>
      <div style="text-align: right;margin-right: 15px;padding-top: 85px;">
        <img src="../../assets/navBar.png" alt="" style="margin-left:7px;margin-top:10px;width:10px;" @click="$router.push({path:'/main/authentication'})">
      </div>
    </div>
    <div style="font-size: 14px;color: #fea620;padding-left: 15px;margin-top: 0px;background: #f6f6f6;" @click="$router.push({path:'/main/noComplete'})"
      v-if="user.unPay">
      您有未完成支付的订单哦~
    </div>
    <div style="background: #f6f6f6;padding-top: 2px;">
      <div class="currBox" @click="$router.push({path:'/main/totalAssets'})">
        <div class="bg1">
          <div class="currTitle">
            法币总资产
          </div>
          <div class="currCont">
            <img src="../../assets/myMoney.png" alt="" width="20" v-if="user.count">
            <span style="color: #fea620;font-size: 20px;">{{user.count}}</span>
            <div style="margin-top: 10px;font-size: 13px;color: #999">点击查看充值、提现、持仓等详情</div>
          </div>
        </div>
      </div>
      <div class="currBox" @click="$router.push({path:'/main/digitalAssets'})">
        <div class="bg2">
          <div class="currTitle">
            数字资产
          </div>
          <div class="currContNum">
            <div style="width: 190px; margin: auto;text-align: left;    padding-left: 90px;">
              <div v-for="num in user.coins">
                <img :src="num.icon" alt="" width="20">
                <span style="color: #fea620;font-size: 20px;">{{num.cmount}}{{num.name}}</span>
              </div>
            </div>
            <div style="margin-top: 10px;font-size: 13px;color: #999;text-align: center">点击查看充值、提现、持仓等详情</div>
          </div>
        </div>
      </div>
      <div class="bank">
        <div style="height:10px;background: #f6f6f6"></div>
        <ul style="padding:0px 15px;">
          <li class="bankList" @click="$router.push({ path: '/main/bankList' })">
            <img slot="icon" height="20" width="20" src="../../assets/bank.png">
            <span class="c3 bankSty">银行卡管理</span>
            <img src="../../assets/nav.png" alt="" width='7' class="nav">
          </li>
          <li class="bankList" @click="$router.push({ path: '/main/purseAddress' })">
            <img slot="icon" height="20" width="20" src="../../assets/wallet.png">
            <span class="c3">钱包地址管理</span>
            <img src="../../assets/nav.png" alt="" width='7' class="nav">
          </li>
          <li class="bankList" @click="$router.push({ path: '/main/coupon' })">
            <img slot="icon" height="20" width="20" src="../../assets/coupon.png">
            <span class="c3">我的优惠券</span>
            <img src="../../assets/nav.png" alt="" width='7' class="nav">
          </li>
          <li class="bankList" @click="$router.push({path:'/main/install'})">
            <img slot="icon" height="20" width="20" src="../../assets/setUp.png">
            <span class="c3">设置</span>
            <img src="../../assets/nav.png" alt="" width='7' class="nav">
          </li>
        </ul>
      </div>
    </div>
    <div style="padding: 0px 15px;background: #f6f6f6;">
      <div class="customer">
        <div style="height:10px;background: #f6f6f6"></div>
        <ul style="height:80px;font-size: 14px;position: relative;">
          <span style="height: 10px;width: 10px;border-radius: 50%;background: #f6f6f6;display: block;position: absolute;top:40px;left: -5px;"></span>
          <span style="height: 10px;width: 10px;border-radius: 50%;background: #f6f6f6;display: block;position: absolute;top:40px;right: -5px;"></span>
          <li @click="contactService()">
            <div>
              <img slot="icon" height="22" width="22" src="../../assets/customer.png">
              <span class="c3">联系客服</span>
            </div>
          </li>
          <li @click="$router.push({path:'/main/help'})">
            <div>
              <img slot="icon" height="22" width="22" src="../../assets/help.png">
              <span class="c3">帮助中心</span>
            </div>
          </li>
          <li @click="$router.push({path:'/main/feedback'})">
            <div>
              <img slot="icon" height="22" width="22" src="../../assets/opinion.png">
              <span class="c3">意见反馈</span>
            </div>
          </li>
        </ul>
        <div style="height:115px;background:#f6f6f6"></div>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script>

  import Tabbar from '../../components/common/Tabbar.vue'
  import http from '../../service/http.js'
  // import axios from 'axios'
  export default {
    components: {
      Tabbar,
    },
    data() {
      return {
        showMoney: true,
        user: {},//用户信息
      }
    },
    mounted() {
      this.getUser();
    },
    methods: {
      // 联系客服
      contactService() {
        location = "http://q.url.cn/ABg4ho?_type=wpa&qidian=true"
      },
      //  获取用户信息
      getUser() {
        http.get("/user/account").then((res) => {
          if (res.data.status == 200) {
            this.user = res.data.body;
          }
        })
      },
      order(status) {
        this.$router.push({ path: '/main/order?status=' + status })
      }
    },

  }
</script>
<style lang="less" scoped>
  .c3 {
    color: #333;
  }

  .icon-avatar {
    background-image: url("");
  }

  .icon {
    display: inline-block;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .my .myBgColor {
    height: 170px;
    background-image: url('../../assets/myBgColor.png');
    .news {
      position: absolute;
      right: 15px;
      top: 15px;
    }

  }

  .my .headPortrait {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    margin-top: 85px;
    margin-left: 16px;
  }

  .my .phoneNum {
    position: absolute;
    top: 5px;
    left: 50px;
    color: #fff;
    font-size: 20px;
  }

  .my .totalAssets {
    text-align: center;
    color: #fff;
    font-size: 20px;
    padding-top: 80px;
  }

  .my .profit {
    color: #fff;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: rgba(255, 255, 255, 0.3)
  }

  .my .balance {
    height: 60px;
    /* margin-top: 5px; */
    background: #fff;
    /* padding-left: 16px; */
    position: relative;
    .money {
      color: #b3b3b3;
      width: 120px;
      text-align: center;
    }
    .amountMoney {
      color: #ff1010;
      width: 120px;
      text-align: center;
    }
    .navBalance {
      position: absolute;
      right: 15px;
      top: 15px;
    }
    .recharge {
      padding: 3px 5px;
      min-width: 60px;
      text-align: center;
      line-height: 20px;
      display: inline-block;
      background: #ff5757;
      color: #fff;
      border-radius: 5px;
    }
    .putForward {
      padding: 3px 5px;
      min-width: 60px;
      text-align: center;
      line-height: 20px;
      display: inline-block;
      background: #7ed321;
      color: #fff;
      border-radius: 5px;
    }
    .transaction {
      padding: 3px 10px;
      min-width: 60px;
      text-align: center;
      line-height: 20px;
      display: inline-block;
      background: #fed50e;
      color: #fff;
      border-radius: 5px;
    }
  }

  .my .myAssets {
    background: #f6f6f6;
    padding-top: 10px;
    position: relative;
    .navAssets {
      height: 45px;
      line-height: 45px;
      background: #fff;
      padding-left: 16px;
      border-bottom: 1px solid #f6f6f6;
    }
    .allList {
      position: absolute;
      right: 15px;
      color: #b3b3b3;
    }
  }

  .my .statusList {
    height: 70px;
    background: #fff;
  }

  .my .statusList li {
    float: left;
    list-style: none;
    width: 25%;
    text-align: center;
    margin-top: 10px;
    position: relative;
    .statusNum {
      color: #fff;
      position: absolute;
      top: -5px;
      background: #ff5757;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      font-size: 10px;
      text-align: center;
      line-height: 15px;
    }
    .statusText {
      display: block;
      color: #333;
      font-size: 13px;
    }
  }

  .my .imgSty {
    height: 22px;
  }

  /* .my .bank {
    padding: 0px 15px;
  } */

  /* .my .bank ul {
    background: url('../../assets/myBg1.png');
    background-size: cover;
  } */

  .my .bankList {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #efefef;
    list-style: none;
    padding-left: 16px;
    position: relative;
    /* background: #fff; */
    background: url('../../assets/liBg.png');
    background-size: 100% 100%;
    img {
      vertical-align: middle;
    }
    .nav {
      position: absolute;
      right: 15px;
      top: 15px;
    }
    span {
      font-size: 14px;
      color: #333;
      vertical-align: middle;
    }
  }

  .my .customer {
    li {
      float: left;
      width: 33.33%;
      background: #fff;
      list-style: none;
      text-align: center;
      height: 100px;
      div {
        margin-top: 25px;
      }
      img {
        display: block;
        margin: 15px auto 5px;
      }
    }
  }

  .my .currBox {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
    border-radius: 10px;
    padding: 0px 15px;
    .bg1 {
      background: url('../../assets/numBg1.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 100%;
      min-height: 125px;
    }
    .bg2 {
      background: url('../../assets/numBg2.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 100%;
      min-height: 170px;
    }
  }

  .my .currTitle {
    height: 40px;
    line-height: 45px;
    color: #333;
    text-align: center;
    font-size: 14px;
    /* background: #fff; */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    /* border-bottom: 1px dashed #f6f6f6; */
  }

  .my .currTitleLeft {
    height: 15px;
    width: 15px;
    background: red;
    display: block;
  }

  .my .currTitleDes {
    border-bottom: 1px dashed #f6f6f6;
  }

  .my .currCont {
    text-align: center;
    padding: 10px 15px;
    /* background: #fff; */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }

  .my .currContNum {
    text-align: center;
    padding: 10px 15px;
    /* background: #fff; */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
</style>